<template>
  <div class="code_set_container">
    <el-tabs v-model="propName" class="demo-tabs" @tab-click="(tab) => switchTabs(tab.props.name)">
      <el-tab-pane label="条码设置" name="first">
        <div class="code_set">
          <div class="register_set_container">
            <span class="title">登记设置</span>
            <ActiveCard />
          </div>
          <div class="code_table_field_container">
            <span class="title">条码表字段</span>
            <RegisCard ref="regCard" />
          </div>
          <div class="code_custom_field_container">
            <span class="title">条码自定义字段</span>
            <div class="code_custom_field_component">
              <RegisField ref="regField" />
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="条码策略" name="second">
        <StraCard ref="straCard" />
      </el-tab-pane>

      <!-- <el-tab-pane label="登记设置" name="third">
          </el-tab-pane> -->
      <!-- <el-tab-pane label="条码表字段" name="field1">
          </el-tab-pane> -->
      <!-- <el-tab-pane label="字段设置" name="field2">
          </el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
  import StraCard from '../components/StraCard/index.vue'
  import ActiveCard from '../components/ActiveCard/index.vue'
  import RegisCard from '../components/RegisCard/index.vue'
  import RegisField from '../components/RegisField/index.vue'
  import { onMounted, ref, watch } from 'vue'
  import { useRoute } from 'vue-router'
  import routeComponentName from '@/config/route-component-name'

  defineOptions({
    name: routeComponentName.setting.snCodeSet,
  })

  const route = useRoute()
  const propName = ref(route.query.active == undefined ? 'first' : route.query.active)
  const straCard = ref()
  const regCard = ref()
  const regField = ref()

  // 导航切换时
  const switchTabs = async (tab) => {
    propName.value = tab
    if (tab == 'first') {
      await regCard.value.getSet()
      await regField.value.getList()
    }
    if (tab == 'second') {
      await straCard.value.getSet()
    }
  }
  watch(
    () => route.path,
    () => {
      if (route.query.active) {
        switchTabs(route.query.active)
      }
    },
  )

  onMounted(() => {
    if (regField.value) {
      regField.value.getList()
    }
  })
</script>

<style scoped lang="scss">
  @import './index';
</style>
